<template>
    <div class="wrapper">
        <div class="actions" style="margin-bottom: 10px">
            <div class="left">
                <el-button type="primary" plain size="mini" @click="handleDel">删除</el-button>
            </div>
            <div class="right">
                <el-pagination small :current-page="paginations.pageIndex" :page-sizes="paginations.pageSizes"
                    :page-size="paginations.pageSize" :layout="paginations.layout" :total="paginations.total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
        <el-table ref="multipleTable" :data="tableData" border stripe align="center"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="45"> </el-table-column>
            <el-table-column prop="" label="序号" width="50" type="index"></el-table-column>
            <el-table-column prop="waybill_no" label="报案订单号" width="180"></el-table-column>
            <el-table-column prop="damage_time" label="货损时间" width="180">
                <template slot-scope="scope">
                    <span v-time="scope.row.damage_time"></span>
                </template>
            </el-table-column>
            <el-table-column prop="damage_location" label=" 货损地点" width="180"></el-table-column>
            <el-table-column prop="damage_reason" label="货损原因" width="180"></el-table-column>
            <el-table-column prop="damage_pass" label="货损经过" width="180"></el-table-column>
            <el-table-column prop="estimated_amount" label="预估总损失金额" width="180"></el-table-column>
            <!-- <el-table-column prop="carrier_name" label="承运商" width="180"></el-table-column> -->
            <el-table-column prop="" fixed="right" align="center" label="操作" width="120">
                <template slot-scope="scope">
                    <el-button type="text" plain size="mini" @click="handleOperation(scope.row, 'detail')">详情
                    </el-button>
                    <!-- <el-button type="text" plain size="mini" @click="handleOperation(scope.row, 'edit')">编辑
                    </el-button> -->
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {
    CompensationList,
    CompensationDetail,
    CompensationDelete
} from '@/api/app.js';
export default {
    name: 'refundReviewList',
    components: { },
    props: [],
    data() {
        return {
            tableData: [],
            paginations: {
                pageIndex: 1, // 当前位于哪页
                pageSize: 20, // 1页显示多少条
                pageSizes: [10, 20, 50, 100], //每页显示多少条
                total: 200,
                layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
            },
            checkedList: [],
            searchParams: {},
        };
    },
    mounted() {
        this.getDataList()
     },
    methods: {
        handleSelectionChange(checked) {
            this.checkedList = checked.map((item) => item.id);
        },
        handleOperation(row, mode) {
            this.$router.push({
                name: 'compensationEdit',
                query: {
                    id: row.id,
                    mode
                }
            });
        },
        // 通过、驳回
        handleClickOperation(type) {
            this.reviewType = type;
            this.dialogVisible = true;
        },
        handleCloseDialog() {
            this.dialogVisible = false;
        },
        // 每页条数改变
        handleSizeChange(val) {
            this.paginations.pageSize = val;
            this.getDataList();
        },
        // 当前页改变
        handleCurrentChange(val) {
            this.paginations.pageIndex = val;
            this.getDataList();
        },
        getDataList() {
            CompensationList({
                page: this.paginations.pageIndex,
                page_size: this.paginations.pageSize,
                ...this.searchParams,
            }).then((res) => {
                this.tableData = res.data.list || [];
                this.paginations.total = res.data.total;
            });
        },
        handleDel() {
            if (this.checkedList.length === 0) {
                this.$message({
                    message: "请选中后进行操作",
                    type: "warning",
                });
                return;
            }
            CompensationDelete({
                ids: this.checkedList
            }).then(res => {
                if (res.code === 10000) {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                    this.getDataList();
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.wrapper {
    margin-top: 5px;
    margin-left: 5px;
    background-color: #fff;
    padding: 10px;

    .orderHeader {
        margin-top: 5px;
        background-color: #fff;

        .orderSearch {
            form {
                ::v-deep .el-form-item__label {
                    font-size: 14px;
                }

                .el-textarea {
                    width: 135px;
                }
            }
        }
    }
    .actions {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        background-color: #fff;

        .el-button+.el-dropdown,
        .el-dropdown+.el-button {
            margin-left: 10px;
        }
    }
}
</style>